<template>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  title-type="icon"
                  :tab-page-height="tabPageHeight"
                  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
        <list v-for="(v,index) in tabList"
              :key="index"
              class="item-container"
              :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">

            <refresh class="border-cell" @refresh="onrefresh"
                     :display="refreshing ? 'show' : 'hide'">
                <loading-indicator style="width: 50px;height: 50px;color: #00c26e;"
                                   class="indicator"></loading-indicator>
            </refresh>

            <cell v-for="(demo,key) in v" class="cell" :key="key">
                <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)" @wxcPanItemPan="wxcPanItemPan">
                    <div class="content speech-content" v-if="demo.sourceType=== 'speech'" @click="jumpSpeechDetail">
                        <div class="item-head">
                            <image class="photo" src="root:img/my_photo.png"></image>
                            <div class="item-user-info">
                                <div class="item-user-name" style="height: 40px;">
                                    <text style="line-height: 6px;font-size: 28px;width: 220px;margin-left: 15px;">
                                        {{demo.sourceUser}}
                                    </text>
                                    <text style="font-size: 28px;color:#999999;">{{demo.sectionName}}</text>
                                </div>
                                <div>
                                    <text style="font-size: 24px;color:#999999;">{{formatDate(demo.createTime)}}
                                    </text>
                                </div>
                            </div>
                        </div>
                        <div class="item-content">

                            <text class="item-content-t">{{ textContent(demo.contentText)}}</text>

                            <div v-if="demo.contentType === '1300'" style="flex-direction: row;">
                                <image class="speech-img" v-for="url in imgList(demo.contentFileKey)"
                                       placeholder="root:img/default_yx.png" :src="url"></image>
                            </div>

                            <audio-vue v-if="demo.contentType === '1100'" :time="demo.voiceTime"
                                       :audioSrc="vedioUrl(demo.contentFileKey)"></audio-vue>

                            <!--<image :src="demo.contentFileKey"></image>-->
                        </div>
                        <div class="item-footer">
                            <div class="item-footer-area item-footer-left">
                                <image class="item-footer-i" src="root:img/read_icon.png"></image>
                                <text class="item-footer-t">阅读({{demo.lookNum}})</text>
                            </div>
                            <div class="item-footer-area item-footer-middle">
                                <image class="item-footer-i" src="root:img/conment_icon.png"></image>
                                <text class="item-footer-t">评论({{demo.commentNum}})</text>
                            </div>
                            <div class="item-footer-area item-footer-right">
                                <image class="item-footer-i" src="root:img/like_icon.png"></image>
                                <text class="item-footer-t">赞({{demo.likeNum}})</text>
                            </div>
                        </div>
                    </div>
                    <div class="content article-item-content" v-else @click="jumpArticleDetail" :data-id="demo.id">
                        <div class="article-item-content-title">
                            <div style="height: 200px;margin-bottom: 20px;">
                                <text style="font-size: 36px;">{{demo.title}}</text>
                            </div>
                            <div style="flex-direction: row;">
                                <text class="item-s-t">{{demo.sourceUser}}</text>
                                <text class="item-s-t">{{demo.commentNum}}评论</text>
                                <text class="item-s-t">{{formatDate(demo.createTime)}}</text>
                            </div>
                        </div>
                        <div class="article-item-content-img">
                            <image src="root:img/default_yx.png" style="width: 200px;height: 200px;"></image>
                        </div>
                    </div>
                </wxc-pan-item>
            </cell>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <loading-indicator class="loading-indicator"></loading-indicator>
            </loading>
        </list>
    </wxc-tab-page>
</template>
<style scoped>


    .speech-img {
        width: 230px;
        height: 230px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        border-width: 1px;
        border-color: #e9e9e9;
    }

    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .loading-indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .loading-indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .item-s-t {
        font-size: 24px;
        color: #999999;
        margin-right: 20px;
    }

    .article-item-content {
        flex-direction: row;
        padding-top: 32px;

    }

    .article-item-content-img {
        margin-bottom: 32px;
        width: 200px;
    }

    .article-item-content-title {
        flex-direction: column-reverse;
        width: 520px;
        padding-right: 20px;
        height: 268px;
    }

    .item-footer-i {
        width: 34px;
        height: 23px;
        margin-right: 5px;
    }

    .item-footer-t {
        font-size: 25px;
        color: #272727;
    }

    .item-footer-area {
        width: 240px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .item-footer {
        height: 78px;
        flex-direction: row;
        border-top-width: 1px;
        border-top-color: #f0f0f0;
        margin-top: 20px;
    }

    .item-content-t {
        font-size: 32px;
        color: #272727;
    }

    .item-content {
        padding-top: 20px;
    }

    .item-user-info {
        flex-direction: column-reverse;
        margin-left: 10px;
    }

    .item-user-name {
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: bold;
        flex-direction: row;
    }

    .photo {
        height: 80px;
        width: 88px;
        border-radius: 100px;
        margin-left: 10px;

        border-width: 1px;
        border-color: #717171;
    }

    .item-head {
        flex-direction: row;
        margin-top: 32px;
    }

    .item-container {
        width: 750px;
        background-color: #f2f3f4;
    }

    .border-cell {
        background-color: #f2f3f4;
        width: 750px;
        height: 100px;
        align-items: center;
        justify-content: center;
        border-bottom-width: 1px;
        border-style: solid;
        border-color: #e0e0e0;
    }

    .cell {
        background-color: #ffffff;
    }

    .content {
        width: 750px;
        border-bottom-width: 10px;
        border-bottom-color: #F6F6F6;
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-left: 15px;
        padding-right: 15px;
    }


</style>
<script>
    const dom = weex.requireModule('dom')
    import {WxcTabPage, WxcPanItem, Utils, BindEnv} from 'weex-ui'
    import nw from '../network/nw.js'
    import utils from '../utils/utils.js'
    import audioVue from './audioVue.vue'


    var nav = weex.requireModule('navigator')


    var urlencode = require('urlencode')

    const modal = weex.requireModule('modal')

    //请求地址列表
    const url = {
        classifyList: 'app/yxq/index/classify',
        indexList: 'app/yxq/index/list',
        detail: '/app/yxq/article/'
    }

    import Config from '../config'

    export default {
        components: {WxcTabPage, WxcPanItem, audioVue},

        data: () => ({
            tabTitles: Config.tabTitles,
            tabStyles: Config.tabStyles,
            tabList: [],
            demoList: [],
            refreshing: false,//genx
            loadinging: false,//加载数据
            tabPageHeight: 1334,
            nodesTime: {},
            page: 0,//第几个栏目
            isRefs: []//是否刷新当前栏目
        }),

        beforeCreate() {

            var self = this
            //加载分类
            nw.postDefine(url.classifyList, {
                progress: false,
                success(res) {

                    var tabs = new Array()

                    tabs.push({
                        title: '关注',
                        icon: null,
                        activeIcon: null,
                        activeIcon: null,
                        stat: '',
                        classifyId: 0
                    })


                    for (let i = 0; i < res.length; i++) {
                        var t = res[i]
                        var tab = {
                            title: t.calssifyName,
                            icon: null,
                            activeIcon: null,
                            activeIcon: null,
                            stat: t.stat,
                            classifyId: t.classifyId
                        }
                        tabs.push(tab)
                    }
                    self.tabTitles = tabs
                    self.loadTab(0, true)

                }
            })
        },

        created() {
            this.tabPageHeight = Utils.env.getPageHeight()
        },
        methods: {

            //加载栏目
            loadTab(index, isRefresh, callback) {

                const self = this
                const tinfo = self.tabTitles[index]
                const modal = weex.requireModule('modal')

                self.nodesTime[index] = isRefresh ? '' : self.nodesTime[index] ? self.nodesTime[index] : ''


                var formatTime = this.formatDateTime((self.nodesTime[index]))

                var reqData = {
                    articleTime: formatTime,
                    classifyId: tinfo.classifyId ? tinfo.classifyId : null,
                    attention: index == 0 ? 1 : null
                }

                self.loadinging = true


                nw.postDefine(url.indexList, {
                    data: reqData,
                    success(res) {


                        var newObj = Object.assign({}, res)


                        var len = Object.keys(newObj).length

                        if (len > 0) {
                            var lastData = newObj[len - 1]
                            if (lastData.createTime) {
                                self.nodesTime[index] = lastData.createTime
                            }
                        }


                        if (isRefresh && len > 0) {
                            self.tabList[index] = new Array()
                            self.isRefs[index] = true
                        }


                        for (let i in newObj) {
                            let v = newObj[i]
                            if (v.sourceType === 'speech' || v.contentText) {
                                v.contentText = urlencode.decode(v.contentText)
                            }


                            self.tabList[index].push(v)


                        }

                        if (callback) {
                            callback()
                        }


                        self.loadinging = false

                    }
                })



                if(isRefresh) {
                    Vue.set(self.tabList, index, self.demoList)
                }

            },

            wxcTabPageCurrentTabSelected(e) {
                this.page = e.page
                if (!this.isRefs[e.page]) {
                    this.loadTab(e.page, true)
                }
            },

            wxcPanItemPan(e, d) {
//                this.toast(BindEnv.supportsEBForAndroid())


//                var currentCard = this.$refs['card' + index + '_' + this.sliderId][0];

//
                if (BindEnv.supportsEBForAndroid()) {
                    this.$refs['wxc-tab-page'].bindExp(e.element)
                } else {

                }


//                const self = this
//
//                console.info(d)
            },

            //重新加载改栏目
            onrefresh(event) {
                var self = this
                self.refreshing = true
                this.loadTab(this.page, true, () => {
                    self.refreshing = false
                })
            },

            onloading(event) {
                var self = this
                self.refreshing = true
                self.loadTab(this.page, false, () => {
                    self.refreshing = false
                })
            },

            //字符串urlencode转字符串
            toGb(data) {
                return unescape(data.replace(/\\u/gi, '%u'))
//                return escape(data).toLocaleLowerCase().replace(/%u/gi,'\\u');
            },

            //时间戳格式为yyyy-mm-dd
            formatDate(timeStamp) {
                var date = new Date()
                date.setTime(timeStamp)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                return y + '-' + m + '-' + d
            },
            //时间戳格式为yyyy-MM-dd hh:mm:ss
            formatDateTime(timeStamp){
                if(!timeStamp) {
                    return ''
                }
                var date = new Date()
                date.setTime(timeStamp)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                var h = date.getHours()
                h = h < 10 ? ('0' + h) : h
                var minute = date.getMinutes()
                var second = date.getSeconds()
                minute = minute < 10 ? ('0' + minute) : minute
                second = second < 10 ? ('0' + second) : second
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
            },

            //内容处理
            textContent(content) {
                if (content == undefined || content == null) {
                    return ''
                }
                return content.length > 66 ? (content.substring(0, 60) + '.....') : content
            },
//
            //获取图片集合
            imgList(urls) {
                if (urls === '') {
                    return null
                }

                var list = urls.split(';')

                var arr = new Array()
                for (let i = 0; i < list.length; i++) {
                    var url = list[i].split(',')[1]
                    arr.push(url)
                }

                return arr
            },

            //获取媒体地址
            vedioUrl(keyUrl) {
                var arr = keyUrl.split(',')

                //暂时写死
//                return 'http://www.w3school.com.cn/i/song.ogg'
                return arr[1]
            },

            //跳转文章详情页
            jumpArticleDetail(event){
                if(!utils.lockEventDeferFree(event)) {
                    nav.pushParam('root:com/yx/article/articleDetail.js',{id:event.target.attr.dataId} )
                }
            },
            //跳转个人言论详情
            jumpSpeechDetail(event){
                if(!utils.lockEventDeferFree(event)) {
                    nav.pushParam('root:com/yx/speech/speechDetail.js',{id:event.target.attr.dataId} )
                }
            }
        },
        mounted() {
        }
    };


</script>